<template>
	<body>
		<div id="qqq">
			<div id="qrCode" ref="qrCodeDiv"></div>
		</div>
	</body>
</template>

<script>
	import QRCode from 'qrcodejs2';
	export default {
		name: "qrCode",
		props: ['url'],
		data() {
			return {
               
            }
		},
		mounted: function() {
            this.bindQRCode()
		},
        watch:{
            url(newValue, oldValue){
                if(newValue){
                   this.delQrcode()
                    setTimeout(()=>{
                         this.bindQRCode()
                      },100)
                }
            }
        },
        
		methods: {
            delQrcode(){
                this.$refs.qrCodeDiv.innerHTML = "";
            },
			bindQRCode: function() {
                this.$nextTick(function() {
                	new QRCode(this.$refs.qrCodeDiv, {
                		text: this.url,
                		width: 200,
                		height: 200,
                		colorDark: "#333333", //二维码颜色
                		colorLight: "#ffffff", //二维码背景色
                		correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
                	})
                })
				
			}
		}

	}
</script>

<style scoped lang="scss">
    #qqq{
        display: flex;
        justify-content: center;
		align-items: center;
		// height: 400rpx;
		
    }
    
</style>
